<template>
  <!-- 贡献者卡片容器，根据 isHovered 动态添加类名，并监听鼠标事件 -->
  <div
    class="contributor-card"
    :class="{ 'is-hovered': isHovered }"
    @mouseover="isHovered = true"
    @mouseleave="isHovered = false"
  >
    <div class="card-content">
      <!-- 贡献者头像，添加 transition 动画效果 -->
      <img :src="contributor.avatarUrl" alt="Contributor Avatar" class="avatar" />
      <!-- 贡献者姓名 -->
      <h3 class="name">{{ contributor.name }}</h3>
      <!-- 贡献描述 -->
      <p class="summary">{{ contributor.summary }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  contributor: Object
});

// 使用 ref 创建响应式状态，用于判断鼠标是否悬停
const isHovered = ref(false);
</script>

<style scoped>
/* 贡献者卡片的基础样式 */
.contributor-card {
  position: relative;
  /* 半透明背景，带有毛玻璃效果 */
  background-color: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.3s ease; /* 所有动画效果都平滑过渡 */
  overflow: hidden; /* 隐藏超出卡片范围的内容 */
}

/* 鼠标悬停时的样式变化 */
.contributor-card:hover {
  transform: translateY(-5px); /* 向上轻微上浮 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 增加阴影效果 */
}

/* 当鼠标悬停时，减少毛玻璃效果，使内容更清晰 */
.is-hovered {
  backdrop-filter: blur(0px);
  background-color: rgba(255, 255, 255, 0.15); /* 背景颜色也高亮 */
}

/* 头像的样式 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%; /* 圆形头像 */
  border: 2px solid #fff;
  transition: transform 0.3s ease; /* 添加放大动画的过渡效果 */
}

/* 鼠标悬停在卡片上时，头像放大 */
.contributor-card:hover .avatar {
  transform: scale(1.1);
}

/* 姓名的样式 */
.name {
  color: #fff;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* 贡献描述的样式 */
.summary {
  color: #aaa;
  font-size: 0.9rem;
}
</style>
